<template>
  <div class="singer">
    <ul class="singer-header">
      <li v-for="(item,index) in singerStyle" :key="index" @click="handleChangeView(item)"
        :class="{active:item.name==activeName}">
        {{item.name}}
      </li>
    </ul>
    <div>
      <content-list :contentList="data"></content-list>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
          :current-page="currentPage" :page-size="pageSize" :total="albumDatas.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import ContentList from '../components/ContentList';
  import {
    mixin
  } from "../mixins";
  import {
    singerStyle
  } from '../assets/data/singer';

  export default {
    name: 'singer',
    components: {
      ContentList
    },
    data() {
      return {
        albumDatas: [], //歌手数据
        pageSize: 15, //页面大小，一页有15条数据
        currentPage: 1, //当前页，默认第一页
        singerStyle: [], //风格
        activeName: '全部歌手' //当前风格
      }
    },
    computed: {
      //计算当前表格中的数据
      data() {
        return this.albumDatas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      }
    },
    mounted() {
      this.singerStyle = singerStyle;
      this.getSingerList();
    },

    methods: {
      getSingerList() {
        this.getRequest("/singer/allSinger").then((res) => {
            this.currentPage = 1;
            this.albumDatas = res.data;
          })
      },
      //获取当前页
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      //根据类型显示对应的歌手
      handleChangeView(item) {
        this.activeName = item.name;
        this.albumDatas = [];
        if (item.name == '全部歌手') {
          this.getSingerList();
        } else {
          this.getSingerOfSex(item.type)
        }
      },
      //根据性别查询对应的歌手
      getSingerOfSex(sex) {
        this.getRequest("/singer/selectBySex?sex=" + sex).then((res) => {
            this.currentPage = 1;
            this.albumDatas = res.data;
          })
      },

    }
  }
</script>

<style scoped>
  div,
  ul,
  li {
    box-sizing: border-box;
    margin-top: 0;
  }

  .singer {
    margin: 0 10%;
    padding-bottom: 100px;
    background-color: white;

  }

  .singer-header {
    width: 100%;
    padding: 0 40px;
    line-height: 250px;
  }

  .singer-header li {
    display: inline-block;
    line-height: 40px;
    margin: 40px 20px 15px 20px;
    font-size: 20px;
    font-weight: 400;
    color: grey;
    border-bottom: none;
    cursor: pointer;
  }

  .singer .singer-header li.active {
    color: black;
    font-weight: 600;
    border-bottom: 4px solid black;
  }

  .pagination {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
  }
</style>
